<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="xxx.html">
    <!--下拉框-->
    <!--selected 表示默认选项-->
    <!--opgroup表示对下拉框进行分组-->
    <select name="city">
        <optgroup label="一线城市">
            <option value="shanghai">上海</option> 
            <option value="hangzhou">杭州</option>
            <option value="suzhou" selected>苏州</option>
        </optgroup>
        <!--disabled label 表示禁用-->
        <optgroup disabled label="二线城市">
            <option value="taiyuan">太原</option> 
            <option value="kunming">昆明</option>
            <option value="xian" selected>西安</option>
        </optgroup>  
    </select>
    <br>
    <!--多行文本框-->
    <textarea name="des" cols="30" rows="10"></textarea>
    <!--fieldest 组件-->
    <fieldset>
        <legend>请登录</legend>
        用户名：<input type="text">
        密码：<input type="password" name="" id="">
    </fieldset>
    <!--给输入框绑定待选项-->
    <input type="text" list="fruit">
    <datalist id="fruit">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="apple">大苹果</option>
        <option value="orange">橘子</option>
        <option value="beach">桃子</option>
    </datalist>
    <br>
    <!--进度条-->
    <progress value="50" max="100"></progress>
    <!--邮箱-->
    <input type="email" name="youxiang" >
    <!--url-->
    <input type="url" name="url" >
    <!--数字-->
    <input type="number" name="num" >
    <!--时间-->
    <input type="date" name="time" >
    <!--颜色-->
    <input type="color" name="color" >
    <br>
    <input type="submit" value="提交">
    </form>
</body>
</html>